<template>
  <div>
    <el-cascader
      :options="parentCateList"
      clearable
      v-model="selectedKeys"
      :props="cascaderProps"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentCateList: [],
      cascaderProps: {
        label: 'cat_name',
        value: 'cat_id',
        children: 'children',
        checkStrictly: true,
        expandTrigger: 'hover'
      },
      selectedKeys: []
    }
  },
  props: ['type', 'cateIdArr'],
  methods: {
    // 获取父级分类的数据列表
    async getParentCateList() {
      const { data: res } = await this.$http.get('categories', {
        params: { type: this.type }
      })
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.parentCateList = res.data
    },
    handleChange() {
      this.$emit('handle', this.selectedKeys)
    }
  },
  watch: {
    cateIdArr() {
      this.selectedKeys = this.cateIdArr
    }
  },
  created() {
    this.getParentCateList()
  }
}
</script>
<style lang="less" scoped>
</style>
